<template>
  <b-col>
    <!-- 好友循环体  -->
    <b-row v-for="f in friends.data" :key="f.id" class="pt-2 pb-1" style="font-family:HYZhengYuan-55S">
      <!-- 头像 -->
      <b-col class="col-auto">
        <b-img-lazy class="rounded-circle border" width="55" height="55"
          blank-src="https://s1.imagehub.cc/images/2023/03/27/2374f80ecf7fed0f7d4ba8cdf4d0d211.webp" :src="f.headUrl" />
      </b-col>
      <!-- 昵称 -->
      <b-col>
        <b-row>
          {{f.name}}
        </b-row>
        <b-row>
          <b-col class="col-auto px-0">
            <b-badge>
              Lv {{f.level}}
            </b-badge>
          </b-col>
          <b-col class="text-right">
            <b-link @click="toUserPage(f.id)" class="text-decoration-none iconfont icon-user">访问主页</b-link>
          </b-col>
        </b-row>
        <b-row class="mt-2">
          {{f.text}}
        </b-row>
      </b-col>
    </b-row>
    <b-row v-if="friends.total == 0">
      <b-col class="text-center" style="font-family:HYZhengYuan-55S">
        <h5>他还没有互相关注的好友</h5>
      </b-col>
    </b-row>
  </b-col>
</template>
<script>
export default {
  props: {
    id: String,
  },
  data() {
    return {
      friends: {
        headUrl: "",
        name: "",
        level: "",
      }
    }
  },
  mounted() {
    this.updataFriend(1, this.id);
  },
  methods: {
    //若翻页更新
    updataFriend(page, id) {
      this.$httpUser.getFriends(page, id).then((res) => {
        this.friends = res;
      })
    },
    //跳转到用户主页
    toUserPage(id) {
      this.$pageRedirect.toPersonPage(id, 1);
    },
  },
}
</script>
<style scoped>
</style>
